<template>
    <el-pagination
        v-model:current-page="pagingGather.Page"
        v-model:page-size="pagingGather.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagingGather.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
    
</template>
<script setup>
import { ref, defineProps, toRefs, defineEmits, watch } from "vue";
const props = defineProps({
    //子组件接收父组件传递过来的值
    pagingGather: Object,
});
const emits = defineEmits(["onwards"]);
const { pagingGather } = toRefs(props);
const small = ref(true);
const background = ref(true);
const disabled = ref(false);

// watch(pagingGather,(newVal, oldVal)=>{
//     emits("onwards", pagingGather.value);
// })

const handleSizeChange = (val) => {
    emits("onwards", pagingGather.value);
};
const handleCurrentChange = (val) => {
    emits("onwards", pagingGather.value);
};
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
}
.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>
